import { NavLink, Outlet } from 'react-router-dom';
import { Button } from "antd";

export const Home = () => {

  const displayArea = {
    padding: "10px"
  }


  return (
    <div style={{ display: 'flex' }}>
      <div style={{ width: '400px', height: '100vh', borderRight: '1px solid #000' }}>
        <Button type="text">
          <NavLink to="/testButton">测试按钮</NavLink> <br />
        </Button>
        <Button type="text">
          <NavLink to="/testDialog">测试弹框V1</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testModalV2">测试弹框V2</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testModalV3">测试弹框V3</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testModalV4">测试弹框V4</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testModalV5">测试弹框V5</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testFormV1">测试表单V1</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testUseMemo">测试useMemo钩子</NavLink>
        </Button>
        <Button type="text">
          <NavLink to="/testMemo">测试memo</NavLink>
        </Button>
         <Button type="text">
          <NavLink to="/testMenuV1">测试Menu V1</NavLink>
        </Button>
      </div>
      <div style={displayArea}>
        <Outlet />
      </div>
    </div>
  )
}